<template>
	<u-popup v-model="show" mode="bottom" safe-area-inset-bottom :mask-close-able="false" border-radius="40">
		<view class="iflex column fill special-popup">
			<view class="special-popup__body">
				<view>
					<view v-for="(item,index) of expertiseList" :key="index" class="iflex aic jcc special"
						:class="{active:item.dictValue === selected}" @click.stop="selected = item.dictValue">
						<view class="ellipsis">
							{{item.dictValue}}
						</view>
					</view>
				</view>
			</view>
			<view class="iflex fill aic jcsb special-popup__footer">
				<u-button @click="tapClose" type="default"
					:custom-style="{width:'172rpx',height:'80rpx',fontSize:'32rpx',fontWeight:400, color: '#757575'}">取消</u-button>
				<u-button @click="tapConfirm" type="primary"
					:custom-style="{width:'498rpx',height:'80rpx',fontSize:'32rpx',fontWeight:500}">确定</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { ref, defineProps, withDefaults, defineEmits, defineExpose } from 'vue';
	import type { AnyObj } from '@/types/global';
	import { getLawfirmExpertiseList } from '@/apis/lawfirm';
	import { isEmpty } from '@/utils/util';
	const emit = defineEmits<{ 'update:modelValue' : [string]; 'change' : [string] }>();
	const props = withDefaults(defineProps<{
		modelValue : string;
	}>(), {
		modelValue: '不限',
	});
	const show = ref(false);
	const selected = ref('');
	const expertiseList = ref<AnyObj[]>([]);

	function loadData() {
		getLawfirmExpertiseList().then((res) => {
			expertiseList.value = [
				{
					dictCode: '',
					dictValue: '不限'
				},
				...(res.data ?? [])
			];
		});
	}


	function tapClose() {
		show.value = false;
	}

	function tapConfirm() {
		tapClose();
		emit('update:modelValue', selected.value);
		emit('change', selected.value)
	}

	defineExpose({
		close() {
			tapClose();
		},
		open() {
			selected.value = isEmpty(props.modelValue) ? '不限' : props.modelValue;
			loadData();
			show.value = true;
		}
	})
</script>

<style lang="scss">
	.special-popup {
		max-height: 75vh;
		border-radius: 40rpx 40rpx 0 0;
		background: #FFF;

		&__body {
			display: flex;
			flex: 1;
			padding: 22rpx 0 22rpx 8rpx;
		}

		&__footer {
			padding: 0 30rpx;
			height: 116rpx;
			background: #FFF;
			filter: drop-shadow(0 -4rpx 2rpx #0000000d);
		}

		.special {
			width: 216rpx;
			height: 64rpx;
			margin: 20rpx 0 0 20rpx;
			border-radius: 8rpx;
			background: #F5F5F5;
			color: #333333;
			font-size: 26rpx;
			font-weight: 400;
			border: 1px solid #F5F5F5;

			&.active {
				border-color: #FF710A;
				color: #ff710a;
				font-weight: 500;
			}
		}
	}
</style>